<template>
  <div id="new_register">
    <c-title :hide="false" :text="pageType == 'register'?'用户注册':'基本信息'"></c-title>
    <!-- 注册页面显示-->
    <div v-if="pageType == 'register'">
      <!-- 背景图 -->
      <img :src="dataList.top_img" class="bgImage" style="z-index: -99;" />
      <!-- -->
      <!-- 下拉框组件-->
      <div style="margin-top: -2.5rem;" :style="fun.isTextEmpty(dataList.top_img)?'margin-top: -1.2rem;':''">
        <inputList ref="input_list" type="register" :inputShowList="inputShowList" :email_register="email_register"
          v-if="JSON.stringify(inputShowList) != '{}'"></inputList>
      </div>
      <!-- -->
    </div>
    <!-- 用户信息页面显示-->
    <div v-else>
      <div class="content">
        <van-cell>
          <template #title>
            <div>
              <div>头像</div>
              <div @click="updateInfo" style="display: flex;" v-if="fun.getWebEnv() != '5'" :style="'color:'+'var(--themeBaseColor)'">
                <div class="iconfont icon-fontclass-gengxin" style="font-size: 12px;"></div>
                <span class="span">更新资料</span>
              </div>
            </div>
          </template>
          <template #default>
            <div style="display: flex; align-items: center; justify-content: flex-end;" @click="beforeRead">
              <van-uploader v-model="fileList" :max-count="1" :after-read="afterRead" :deletable="false"/>
              <van-uploader :max-count="1" :after-read="afterRead" :readonly="!changePicture">
                <div class="iconfont icon-member_right"></div>
              </van-uploader>
            </div>
          </template>
        </van-cell>
      </div>
      <div class="content">
        <div style="margin-top: 0.625rem;">
          <van-cell-group>
            <van-cell title="昵称" value="自定义字段" style="height: 3rem;">
              <van-field v-model.trim="form.nickname" :readonly="!changeNickname" input-align="right" placeholder="请输入昵称" />
            </van-cell>
          </van-cell-group>
        </div>
      </div>
    </div>
    <div class="contentOne">
      <van-cell-group class="model" :border="false">
        <van-cell title="邀请码" value="内容" class="h2-5rem" v-if="invite.status"
          :required="invite.required == 1?true:false">
          <div slot="default">
            <van-field v-model.trim="form.invite_code" input-align="right" placeholder="请输入邀请码" />
          </div>
        </van-cell>
        <van-cell title="父亲姓名" value="内容" class="h2-5rem" v-if="inputShowList.logPlugIn" required>
          <div slot="default">
            <van-field v-model.trim="form.fathername" input-align="right" placeholder="请输入父亲姓名" />
          </div>
        </van-cell>
        <van-cell title="母亲姓名" value="内容" class="h2-5rem" v-if="inputShowList.logPlugIn" required>
          <div slot="default">
            <van-field v-model.trim="form.mothername" input-align="right" placeholder="请输入母亲姓名" />
          </div>
        </van-cell>
        <van-cell title="姓名" value="内容" class="h2-5rem" v-if="registerBasicInfo.name && registerBasicInfo.name.show"
          :required="registerBasicInfo.name.must == 1?true:false">
          <div slot="default">
            <van-field v-model.trim="form.name" input-align="right" placeholder="请输入姓名" />
          </div>
        </van-cell>
        <!-- 性别-->
        <div class="sex">
          <van-cell title="性别" :value="form.sex == 0?'未定义':(form.sex == 1?'男':'女')" @click="sexShow = true" is-link
            v-if="registerBasicInfo.gender && registerBasicInfo.gender.show"
            :required="registerBasicInfo.gender.must == 1?true:false" />
          <van-dialog v-model.trim="sexShow" title="请选择性别" :showConfirmButton="false" closeOnClickOverlay>
            <div slot="title" class="title">
              <div>请选择性别</div>
              <div class="iconfont icon-guanbi icon" @click="sexShow = false">
              </div>
            </div>
            <div class="content">
              <div v-for="(item,index) in sexLIst" :key="index" style="display: flex; padding: 1.5rem 2rem;"
                @click="sexSwitch(index)">
                <div class="sexList">
                  <img :src="item.checked == true?item.checkedUrl:item.url" />
                  <div style="margin-top: 0.5rem;" :style="item.checked == true?'color: #f14e4e;':''">{{item.value}}
                  </div>
                </div>
              </div>
              <span class="text">或</span>
            </div>
          </van-dialog>
        </div>
        <!-- 身份证和身份证地址 -->
        <van-cell title="身份证" value="内容" class="h2-5rem idCard" v-if="registerBasicInfo.idcard && registerBasicInfo.idcard.show"
          :required="registerBasicInfo.idcard.must == 1?true:false">
          <div slot="default">
            <van-field v-model.trim="form.idcard" input-align="right" placeholder="请输入身份证号码" @input="idcardInp" />
          </div>
        </van-cell>
        <van-cell title="身份证地址" value="内容" class="h2-5rem idCard" v-if="registerBasicInfo.idcard_addr && registerBasicInfo.idcard_addr.show"
          :required="registerBasicInfo.idcard_addr.must == 1?true:false">
          <div slot="default">
            <van-field v-model.trim="form.idcard_addr" input-align="right" placeholder="请输入身份证地址" />
          </div>
        </van-cell>
        <!-- 生日-->
        <van-cell title="生日" is-link :value="form.birthday == ''?'请选择':form.birthday" @click="birthdayShow = true"
          v-if="registerBasicInfo.birthday && registerBasicInfo.birthday.show"
          :required="registerBasicInfo.birthday.must == 1?true:false" />
        <!-- <van-calendar v-model.trim="birthdayShow" @confirm="onConfirm" :min-date="minDate" :max-date="maxDate"/> -->
        <van-popup v-model="birthdayShow" position="bottom" :style="{ height: '30%' }">
          <van-datetime-picker v-model="currentDate" type="date" :min-date="minDate" :max-date="maxDate" @confirm="onConfirm" @cancel="birthdayShow = true"/>
        </van-popup>
        <!-- 详细地址-->
        <div v-if="registerBasicInfo.address && registerBasicInfo.address.show">
          <van-cell title="详细地址" value="请选择区域" v-model.trim="districtName == ''?'请选择地址':districtName" is-link
            @click="showAdd = true" :required="registerBasicInfo.address.must == 1?true:false" />
          <div>
            <van-field v-model.trim="form.detailedAddress" rows="4" autosize type="textarea" maxlength="100"
              placeholder="请输入详细地址" show-word-limit />
          </div>
        </div>
      </van-cell-group>
    </div>
    <!-- 自定义字段(固定)-->
    <div class="contentThree" v-if="fixedDiyField.length>0">
      <van-cell-group>
        <van-cell :title="item.name" :value="item.value" v-for="(item,index) in fixedDiyField" :key="index"
          :required="item.must == 1?true:false">
          <div slot="default">
            <van-field v-model.trim="form.field" input-align="right" :placeholder="'请输入'+item.name" :readonly="fixedFieldModification"/>
          </div>
        </van-cell>
      </van-cell-group>
    </div>
    <!-- 自定义字段-->
    <div class="contentThree" v-if="diyField && diyField.form && diyField.form.length > 0">
      <van-cell-group>
        <van-cell :title="item.name" :value="item.value" v-for="(item,index) in diyField.form" :key="index"
          :required="diyField.form_open == 1?true:false">
          <div slot="default">
            <van-field v-model.trim="item.value" input-align="right" :placeholder="'请输入'+item.name"
              :readonly="diyField.form_edit == 1?true:false" />
          </div>
        </van-cell>
      </van-cell-group>
    </div>
    <!-- 自定义表单-->
    <div class="contentFour" v-if="diyStatus == 1">
      <diyorm v-if="diyform.fields" ref="gofunarr" v-on:gofunarr="postDiy" :modeType="'Single'" :singleStatus="true"
        :singleDatas="diyform" :desThumb="false" :memberBtn="false" :methodType="'funarr'"></diyorm>
    </div>
    <div class="navTo" v-if="pageType == 'register'">
      <div>
        <router-link :to="fun.getUrl('login')">返回登录</router-link>
      </div>
      <div>
        <router-link :to="fun.getUrl('home')">首页</router-link>
      </div>


      <div class="yearBox passwordLogin" @click="curlAppurl(item.link_url)" v-if="is_app_xiazai==1 && !isApp"
           v-for="(item,index) in app_url_list"
     style="color: red" >下载{{item.app_title}}</div>

    </div>
    <div style="margin-bottom: 5rem;" v-else></div>
    <div class="agreement"
      v-if="pageType == 'register' && userProtocol.status == 1 || platformAgreement.status == 1">
      <van-checkbox v-model="form.login_checked" :checked-color="'var(--themeBaseColor)'" icon-size="13.5px"
        style="position: absolute; top: 0.2rem; left: 0.5rem;"></van-checkbox>
      <div class="text">我已阅读并同意<span :style="'color:'+'var(--themeBaseColor)'"
          @click="openOpenPlatformAgreement('user')" v-if="userProtocol.status == 1">《{{userProtocol.title}}》</span><span :style="'color:'+'var(--themeBaseColor)'" @click="openOpenPlatformAgreement('platform')"
          v-if="platformAgreement.status == 1">《{{platformAgreement.title}}》</span>,并授权[{{nameOfTheMall}}]使用该[{{nameOfTheMall}}]账号信息（如昵称,头像,收货地址等）进行统一管理
      </div>
    </div>
    <div class="foot set-pc-style">
      <van-button type="primary" :round="true" :style="cssVars"
        @click="pageType == 'register'?register():modifyingUserInformation()">
        {{pageType == 'register'?'注册账号':'保存'}}
      </van-button>
    </div>
    <!-- 地区选择组件-->
    <yd-cityselect v-model="showAdd" :callback="resultAdd" :items="district"></yd-cityselect>
    <!-- 协议弹窗-->
    <van-popup v-model="openPlatformAgreement" style="border-radius: 0.656rem;">
      <div class="city-info">
        <van-nav-bar :title="popoverProtocolContent.title" fixed />
        <div style="height: 2.5rem; clear: both;"></div>
        <div id="a_content" v-html="popoverProtocolContent.content"></div>
        <div style="width: 12.75rem;
            height: 2.313rem;
            background-color: #f04d4d;
            border-radius: 0.188rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 1.193rem;
            margin: 0 auto;
            margin-top: 1.5rem;
            margin-bottom: 1.063rem;" @click="openPlatformAgreement = false">
          确定
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import new_register_controller from "./new_register_controller";
  export default new_register_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.van-field__control {
  width: 150px!important;
}
  #new_register {
    text-align: left;
    overflow: hidden;
    position: relative;

    .bgImage {
      width: 100%;
      max-height: 11.75rem;
      object-fit: cover;
      z-index: -1;
    }

    .content {
      padding: 0 0.969rem;
      margin: 0.625rem;
      border-radius: 0.313rem;
      background-color: white;

      .span {
        font-size: 0.75rem;
        line-height: 1.5rem;
        margin-left: 0.3rem;
      }
    }

    .contentOne {
      background-color: white;
      padding: 0 0.969rem;
      border-radius: 0.313rem;
      margin: 0.625rem;

      .model {
        .sex {
          .title {
            .icon {
              position: absolute;
              top: 1.1rem;
              right: 1.031rem;
              color: #8e8e8e;
            }
          }

          .content {
            display: flex;
            align-items: center;
            justify-content: space-between;

            img {
              width: 3.688rem;
              height: 3.688rem;
            }

            .text {
              position: absolute;
              left: 8.625rem;
              top: 5.5rem;
              color: #d2d2d2;
              font-size: 0.8rem;
              width: 300px;
            }

            .sexList {
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
            }
          }
        }
      }
    }

    .contentTwo {
      background-color: white;
      padding: 0 0.969rem;
      margin: 0.625rem;
      border-radius: 0.313rem;
    }

    .contentThree {
      background-color: white;
      padding: 0 0.969rem;
      margin: 0.625rem;
    }

    .contentFour {
      background-color: white;
      margin: 0.625rem;
      padding: 0 10px;
    }

    .navTo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 1.344rem 1.281rem;
      color: #484848;
      font-size: 0.75rem;
      letter-spacing: 0.038rem;
      margin-bottom: 10rem;
      font-stretch: normal;
    }

    .agreement {
      position: absolute;
      text-align: left;
      align-items: center;
      bottom: 70px;
      margin-left: 4px;
      margin-right: 4px;
      display: flex;
      color: #666;

      .icon {
        color: #b8b8b8;
        font-size: 13px;
        margin-top: 2px;
      }

      .text {
        font-size: 12px;
        letter-spacing: 1px;
        line-height: 18px;
        margin-left: 1.8rem;
        margin-right: 0.5rem;
        width: 300px;
      }
    }

    .foot {
      position: fixed;
      width: 100%;
      bottom: 0;
      background-color: #fff;
      padding: 0.46rem 1.53rem;
      box-shadow: -0.009rem -0.125rem 0.406rem 0 rgba(213, 213, 213, 0.59);
    }
  }

  .h2-5rem {
    height: 2.5rem;
  }
  .idCard{
    .van-cell__title{
      flex: 0.7;
    }
  }

  .city-info {
    border-radius: 0.656rem;
    width: 20rem;
    height: 32rem;
    margin: 0 auto;
    // padding-bottom: 5rem;
    background: #fff;

    header {
      border-radius: 0.656rem 0.656rem 0 0;
    }

    #a_content {
      // width: 14.438rem;
      margin: 0.5rem 0.9rem;
      height: 24rem;
      overflow-y: scroll;

      ::v-deep img {
        max-width: 100%;
        display: flex;
      }
    }
  }

  ::v-deep .van-button--primary {
    height: 2.188rem;
    width: 100%;
    background-color: var(--themeBaseColor);
    border: 1px solid var(--themeBaseColor);
    border-radius: 1.094rem;
  }

  ::v-deep .van-cell {
    text-align: left;
    display: flex;
    align-items: center;
    font-size: 16px;
    padding: 5px 3px;
  }

  ::v-deep .van-dialog {
    border-radius: 0.313rem;
    position: fixed;
    width: 18.125rem;
    height: 11.875rem;
  }

  ::v-deep .van-dialog__header {
    font-size: 0.938rem;
    letter-spacing: 0.075rem;
    margin-top: -0.5rem;
    color: #202020;
  }

  ::v-deep .van-field__body {}

  ::v-deep .van-cell__title,
  .van-cell__value {
    height: 1.4 rem;
  }

  ::v-deep .van-cell--required::before {
    left: -5px;
  }

  ::v-deep .van-uploader__upload {
    width: 50px;
    height: 50px;
    border-radius: 50px;
  }

  ::v-deep .van-uploader__preview-image {
    width: 50px;
    height: 50px;
    border-radius: 50px;
  }

  ::v-deep .van-cell::after {
    border-bottom: none;
  }
</style>
